<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{message}}</p>
      <p>{{obj.xxx}}</p>
      <p>{{obj.yyy}}</p>
      <button @click="message = message + 1">setMsg</button>
      <button @click="obj.xxx = 999">xxx</button>
      <button @click="handle">添加yyy</button>
      <button @click="obj.yyy = 888">yyy</button>
    </div>

    <script src="./vue.js"></script>

    <script>
      // 注意: 默认情况下只有先写在data中,然后经过new Vue内部实现,最终将data的数据添加到了vm实例上.这些数据是响应式数据,这些数据的变化,会导致页面重新渲染.绝对不能说vm上的数据就是响应式数据. 比如vm.xxx = 123.这个xxx是随意添加到vm上的,xxx不是响应是数据
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'Hello World!',
          obj: {},
        },
        methods: {
          handle() {
            // this.$set(vm.obj, 'yyy', '000')
          },
        },
      })
      // 动态设置响应式数据方式一:
      // 注意点: 只能添加到vm实例上的某个响应式的对象里面,不能直接添加到vm实例上
      // Vue.set(vm.obj, 'xxx', '123')
    </script>
  </body>
</html>
